<!-- 小时分钟网格列表型选择组件 -->
<template>
  <div class="wholeSelectContainer">
    <el-popover
      ref="popoverFlexSelect"
      popper-class="FlexSelectContainer"
      width="280"
      trigger="click"
      @after-leave="backToOriginal"
    >
      <template v-if="showHourSelect">
        <div class="selectPopContainer">
          <div class="selectPopContainer-title">
            <span>请选择小时</span>
          </div>
          <div class="selectPopContainer-selectList flexWrap">
            <div
              v-for="(item, index) in 25"
              :key="index"
              @click="selectHour(index +'')"
              class="selectPopContainer-item zjc_flexWrapItem"
            >
              <span v-text="index  < 10 ? '0' + index : index"></span>
            </div>
          </div>
        </div>
      </template>
      <template v-if="showMinuteSelect">
        <div class="selectPopContainer">
          <div class="selectPopContainer-title">
            <span>请选择分钟</span>
          </div>
          <div class="selectPopContainer-selectList">
            <div
              v-for="(m, i) in 6"
              :key="i"
              @click="selectMinute(i+'0')"
              class="zjc_wholeLine"
              :class="i != 0 && isTwenty_four_hour ? 'selectPopContainer-item-diabled' : 'selectPopContainer-item'"
            >
              <span>{{i + '0'}}</span>
            </div>
          </div>
        </div>
      </template>
      <el-input size="small" slot="reference" v-model="ownValue" readonly placeholder="请选择时间"></el-input>
    </el-popover>
  </div>
</template>

<script>
export default {
  name:'HourMinuteSelect',
  model: {
    prop: "timeValue",
    event: "changeChecked"
  },
  props: {
    timeValue: {
      type: String,
      default: "",
    }
  },
  data() {
    return {
      ownValue: "",
      showHourSelect: true,
      showMinuteSelect: false,
      HourVal: "",
      MinuteVal: "",
      isTwenty_four_hour: false,
    }
  },
  watch: {
    timeValue: {
      handler(newVal, oldVal) {
        this.ownValue = newVal
      },
      immediate: true
    },
    ownValue(newVal, oldVal) {
      this.$emit("changeChecked", newVal)
    },
    HourVal(newVal, oldVal) {
      if(newVal == "24") {
        this.isTwenty_four_hour = true;
      } else {
        this.isTwenty_four_hour = false;
      }
    },
  },
  methods: {
    changeChecked(val) {
      this.ownValue = val;
      // this.$emit("changeChecked", val)
      // console.log(val);
    },
    clickSelect() {
      this.showHourSelect = true;
    },
    backToOriginal() {
      this.showHourSelect = true;
      this.showMinuteSelect = false;
      this.HourVal = ""
      this.MinuteVal = ""
    },
    selectHour(val) {
      let hour = ""
      if(val < 10) {
        hour = '0' + val
      } else {
        hour = val
      }
      this.HourVal = hour
      this.showHourSelect = false;
      this.showMinuteSelect = true;
      // console.log(this.HourVal);
    },
    selectMinute(val) {
      if(this.HourVal == "24" && val != 0) {
        return
      }
      this.MinuteVal = val;
      // console.log(val);
      let ownValue = this.HourVal + ":" + this.MinuteVal
      this.changeChecked(ownValue)
      this.$refs.popoverFlexSelect.doClose()
    }
  }
}
</script>

<style lang='less' scoped>
.wholeSelectContainer {
  width: 100%;
  height: 32px;
}
</style>

<style lang='less'>
.el-popover.FlexSelectContainer {
  width: 202px;
  min-height: 215px;
  // height: 236px;

  .selectPopContainer {
    width: 100%;
    height: 100%;

    .selectPopContainer-title {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .selectPopContainer-selectList {
      overflow-x: hidden;
      overflow-y: auto;
      flex: 1;
      width: 100%;
    }
    .selectPopContainer-selectList.flexWrap {
      display: flex;
      flex-wrap: wrap;
    }
    .selectPopContainer-item {
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .selectPopContainer-item-diabled {
      // cursor: not-allowed;
      // pointer-events: none;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(245, 245, 245);
      color: rgb(190, 190, 190);
    }
    .selectPopContainer-item-diabled:focus,
    .selectPopContainer-item-diabled:hover {
      cursor: not-allowed;
    }
    .zjc_flexWrapItem {
      width: 50px;
    }
    .zjc_wholeLine {
      width: 100%;
    }
    .selectPopContainer-item:hover {
      background: #F2F3F5;
      color: #0070d2;
    }
  }
}
</style>